<template>
  <div class="app-container" style="width: 100%">
    <el-row :gutter="20">
      <el-col :sm="18" :lg="18">
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <span>{{ window.myYears.currentYear }}年年检数量统计</span>
            </div>
          </template>
          <div class="body">
            <ul class="first_part">
              <li class="" v-for="(item, index) in resultData">
                <p class="number_name">{{ item.name }}</p>
                <p class="split_line"></p>
                <p class="number_box">
                  <span>{{ item.number }}</span>
                  <span>个</span>
                </p>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="6" :lg="6">
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <span>{{ window.myYears.currentYear }}年年检数量统计</span>
            </div>
          </template>
          <div class="body" ref="topChart2" style="height: 150px"></div>
        </el-card>
      </el-col>
    </el-row>

    <div style="margin-top: 20px">
      <el-card class="update-log">
        <template v-slot:header>
          <div class="clearfix" style="">
            <span>主管部门年检统计</span>
            <div class="tab-btn">
              <span v-for="(item, index) in tabs" :class="{ active: index == showTable }" @click="changeTab(index)">{{
                item }}</span>
            </div>
          </div>
        </template>
        <div class="body">
          <div ref="barChart" v-show="showTable == 0" style="width: 100%; height: 250px"></div>
          <el-table v-show="showTable == 1" size="default"
            :header-cell-style="{ background: '#409EFF', color: '#FFFFFF' }" :data="deptTableData" border>
            <el-table-column type="index" align="center" width="70" label="序号">
            </el-table-column>
            <el-table-column prop="name" width="360" align="center" label="主管部门">
            </el-table-column>
            <el-table-column prop="g1" align="center" label="合格">
            </el-table-column>
            <el-table-column prop="g2" align="center" label="基本合格">
            </el-table-column>
            <el-table-column prop="g3" align="center" label="不合格">
            </el-table-column>
            <el-table-column prop="g4" align="center" label="未年检">
            </el-table-column>
            <el-table-column prop="g5" align="center" label="总数">
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
    <div style="width: 100%">
      <div style="width: 50%; height: 100%; float: left; margin-top: 20px">
        <div ref="linChart" style="width: 100%; height: 400px"></div>
      </div>
      <div style="width: 48%; height: 100%; float: left; margin-top: 22px">
        <div ref="pieChart" style="width: 100%; height: 400px"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  name: 'BarChart',
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return ''
      } else {
        return 'success-row'
      }
    },
    setList() {
      // for (let i = 0; i < 10; i++) {
      //   this.tableData.push({
      //     data1: '1' + i,
      //     data2: this.list1[i],
      //     data3: this.list2[i],
      //     data4: i % 2 == 0 ? '515002356689406000' : '51500235MJP463421N',
      //     data5: i % 2 == 0 ? '4A' : '3A',
      //     data6: i % 2 == 0 ? '社会团体' : '民办非企业单位',
      //     data7: '4A',
      //     data8: '审核通过',
      //     data9: Number(i) < 5 ? '2024' : '2023'
      //   })
      // }
      this.deptTableData = this.depts.map((item, index) => {
        return {
          name: item,
          g1: [70, 67, 63, 60, 55, 50, 48, 40, 36, 27, 20, 10, 7, 5][index],
          g2: [22, 20, 18, 18, 16, 14, 14, 17, 5, 6, 8, 3, 2, 1][index],
          g3: [10, 18, 11, 7, 3, 7, 3, 2, 9, 3, 3, 7, 3, 2][index],
          g4: [24, 20, 8, 6, 8, 5, 3, 5, 3, 7, 5, 3, 5, 3][index],
          g5: [121, 102, 113, 101, 95, 97, 67, 32, 23, 12, 6, 8, 13, 10][index]
        }
      })
    },

    initTopChart() {
      const colorList1 = [
        '#3dce3d',
        '',
        '#1f77ee',
        '',
        '#ee709b',
        '',
        '#f7b31d',
        ''
      ]
      const colorList2 = [
        '#20ac20',
        '',
        '#0e51ab',
        '',
        '#e8487e',
        '',
        '#ab7a0e',
        ''
      ]
      const colorList3 = [
        '#197e19',
        '',
        '#084290',
        '',
        '#E91E63',
        '',
        '#906508',
        ''
      ]
      let total = 0
      let dataList = []
      const moduleContent = { 合格: 489, 基本合格: 34, 不合格: 24, 未年检: 12 }
      let sum = 0
      const chartdata = []
      for (const i in moduleContent) {
        chartdata.push({
          name: i,
          value: moduleContent[i] || 1
        })
        sum += Number(moduleContent[i] || 0)
      }
      total = sum
      dataList = chartdata
      const data1 = []
      chartdata.forEach((item) => {
        const _item = { ...item }
        if (!_item.value) {
          _item.value = sum / 100
        }
        data1.push(_item, {
          name: '',
          value: sum / 100,
          label: { show: false },
          itemStyle: {
            color: 'transparent'
          }
        })
      })

      const chartDom = this.$refs.topChart2
      const myChart = echarts.init(chartDom)
      const option = {
        title: {
          text: '559',
          subtext: `总数`,
          top: '40%',
          left: 'center',
          itemGap: 1,
          textStyle: {
            color: '#00266b',
            fontSize: 20,
            fontWeight: 400
          },
          subtextStyle: {
            color: 'rgba(0,38,107,0.39)',
            fontSize: 12,
            fontWeight: 400
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['75%', '90%'],
            center: ['50%', '50%'],
            minAngle: 5,
            labelLine: {
              show: false
            },
            label: {
              show: true,
              alignTo: 'labelLine',
              position: 'outside',

              rich: {
                name: {
                  color: '#00266b',
                  fontSize: 12,
                  fontWeight: 400,
                  padding: [0, 0, 0, 10]
                },
                zb: {
                  color: '#00266b',
                  fontWeight: 400,
                  fontSize: 12,
                  align: 'left',
                  padding: [0, 0, 0, 24]
                },
                dot: {
                  backgroundColor: 'auto',
                  width: 12,
                  height: 12,
                  padding: [0, 0, 0, 0],
                  verticalAlign: 'top'
                }
              },
              formatter: (params) => {
                const x = params.dataIndex
                return (
                  '{dot|}' +
                  '{name|' +
                  params.data.name +
                  '}' +
                  '\n' +
                  '{zb|' +
                  params.data.value +
                  '}'
                )
              }
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList1[params.dataIndex]
                }
              }
            },
            data: data1,
            z: 666
          },
          {
            type: 'pie',
            radius: ['75%', '60%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            minAngle: 5,
            emphasis: { scale: false },
            label: {
              show: false
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList2[params.dataIndex]
                }
              }
            },
            data: data1,
            z: 1
          },
          {
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            minAngle: 5,
            emphasis: { scale: false },
            label: {
              show: false
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList3[params.dataIndex]
                }
              }
            },
            data: data1,
            z: 1
          }
        ]
      }

      myChart.setOption(option)
    },
    initBarChart(typeBar) {
      const xAxisData = [
        '民政局',
        '市场监管局',
        '科学技术局',
        '人社局',
        '气象局',
        '法院',
        '残联',
        '科技协会',
        '消防救援队',
        '卫生健康委员会'
      ]
      const chartDom = this.$refs.barChart
      const myChart = echarts.init(chartDom)
      const option = {
        // title: {
        //   text: '社会组织各等级评估审核通过量',
        //   subtext: '2020年-{{ myYears.currentYear}}年',
        //   x: 'center'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          // x: 'left',
          // y: 'top',
        },
        grid: {
          show: false, // 不显示外边框
          right: 50,
          left: 50,
          height: 170
        },
        yAxis: {
          name: '组织数量',
          type: 'value',
          position: 'top',
          splitLine: {
            show: true, // 显示网格线
            lineStyle: {
              type: 'dashed' // 网格线设置为虚线
            }
          }
        },
        xAxis: {
          name: '主管部门',
          type: 'category',
          data: [
            '民政局',
            '市场监管局',
            '科学技术局',
            '人社局',
            '气象局',
            '法院',
            '残联',
            '科技协会',
            '消防救援队',
            '卫生健康委员会',
            '环保局',
            '城管局',
            '教育委员会',
            '妇联'
          ],
          splitLine: {
            show: true, // 显示网格线
            lineStyle: {
              type: 'dashed' // 网格线设置为虚线
            }
          }
        },
        series: [
          {
            name: '总数',
            type: 'line',
            data: [121, 102, 113, 101, 95, 97, 67, 60, 48, 46, 40, 24, 22, 16],
            barWidth: 10,
            smooth: 0.5, // 设置折线弧度
            itemStyle: {
              color: '#409EFF'
            }
          },
          {
            name: '年检合格',
            type: typeBar,
            data: [70, 67, 63, 60, 55, 50, 48, 40, 36, 27, 20, 10, 7, 5],
            barWidth: 10,
            itemStyle: {
              color: '#409EFF'
            }
          },
          {
            name: '基本合格',
            type: typeBar,
            data: [22, 20, 18, 18, 16, 14, 14, 17, 5, 6, 8, 3, 2, 1],
            barWidth: 10,
            itemStyle: {
              color: '#67C23A'
            }
          },
          {
            name: '不合格',
            type: typeBar,
            // stack: '总量',
            barWidth: 10,
            data: [10, 18, 11, 7, 3, 7, 3, 2, 9, 3, 3, 7, 3, 2],
            itemStyle: {
              color: '#E6A23C'
            }
          },
          {
            name: '未年检',
            type: typeBar,
            // stack: '总量',
            barWidth: 10,
            data: [24, 20, 8, 6, 8, 5, 3, 5, 3, 7, 5, 3, 5, 3],
            itemStyle: {
              color: '#f56c6c'
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    initLinChart() {
      const chartDom = this.$refs.linChart
      const myChart = echarts.init(chartDom)
      const option = {
        title: {
          text: '民非社团统计',
          subtext: '{{ myYears.currentYear}}年',
          x: 'center'
        },
        legend: {
          orient: 'horizontal',
          x: 'left',
          y: 'top',
          data: ['总数', '合格', '基本合格', '不合格', '未年检']
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '10%',
          bottom: '5%',
          containLabel: true
        },
        tooltip: {
          // tooltip 用于控制鼠标滑过或点击时的提示框（下一章展开讲）
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器配置项。
            type: 'cross', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
            axis: 'auto', // 指示器的坐标轴。
            snap: true // 坐标轴指示器是否自动吸附到点上
          },
          showContent: true
        },
        toolbox: {
          // 右上角的工具框（下一章展开讲）
          feature: {
            saveAsImage: {} //下载按钮
          }
        },
        xAxis: {
          name: '类型',
          type: 'category',
          data: ['民非', '社团']
        },
        yAxis: {
          name: '通过量',
          type: 'value',
          min: 10, // 配置 Y 轴刻度最小值
          // max: 4000,  // 配置 Y 轴刻度最大值
          splitNumber: 7 // 配置 Y 轴数值间隔
        },
        series: [
          {
            name: '总数',
            type: 'bar',
            data: [44, 55, 46, 51, 49]
          },
          {
            name: '合格',
            type: 'bar',
            data: [33, 41, 37, 38, 35],
            smooth: 0.5 // 设置折线弧度
          },
          {
            name: '基本合格',
            type: 'bar',
            data: [33, 41, 37, 38, 35],
            smooth: 0.5 // 设置折线弧度
          },
          {
            name: '不合格',
            type: 'bar',
            data: [50, 60, 60, 54, 68],
            smooth: 0.5 // 设置折线弧度
          },
          {
            name: '未年检',
            type: 'bar',
            data: [50, 60, 60, 54, 68],
            smooth: 0.5 // 设置折线弧度
          }
        ],
        color: ['#409EFF', '#67C23A', '#E6A23C']
      }
      myChart.setOption(option)
    },
    initPieChart() {
      const chartDom = this.$refs.pieChart
      const myChart = echarts.init(chartDom)
      const option = {
        title: {
          text: '组织年检问题项统计',
          subtext: '{{ myYears.currentYear}}年',
          x: 'right'
        },
        legend: {
          show: true,
          orient: 'vertical',
          right: 0,
          top: 'center',
          padding: [12, 12, 12, 12],
          itemGap: 16,
          borderRadius: 5,
          itemWidth: 10,
          icon: 'circle',
          itemHeight: 10,
          inactiveColor: '#ccc',
          data: [
            {
              name: '基本信息',
              textStyle: {
                rich: {
                  title: {
                    color: 'inherit',
                    fontSize: 14,
                    width: 90,
                    fontWeight: 'bold'
                  },
                  value: {
                    fontSize: 14,
                    width: 100,
                    fontWeight: 'bold'
                  },
                  p: {
                    fontSize: 14,
                    width: 50,
                    color: '#02D0C5',
                    shadowColor: '#000',
                    inactiveColor: '#000',
                    fontWeight: 'bold'
                  }
                }
              }
            },
            {
              name: '党建工作',
              textStyle: {
                rich: {
                  title: {
                    color: 'inherit',
                    fontSize: 14,
                    width: 90,
                    fontWeight: 'bold'
                  },
                  value: {
                    fontSize: 14,
                    width: 100,
                    fontWeight: 'bold'
                  },
                  p: {
                    fontSize: 14,
                    width: 50,
                    color: '#2BC7F1',
                    shadowColor: '#000',
                    inactiveColor: '#000',
                    fontWeight: 'bold'
                  }
                }
              }
            },
            {
              name: '内设机构',
              textStyle: {
                rich: {
                  title: {
                    color: 'inherit',
                    fontSize: 14,
                    width: 90,
                    fontWeight: 'bold'
                  },
                  value: {
                    fontSize: 14,
                    width: 100,
                    fontWeight: 'bold'
                  },
                  p: {
                    fontSize: 14,
                    width: 50,
                    color: '#E2B842',
                    shadowColor: '#000',
                    inactiveColor: '#000',
                    fontWeight: 'bold'
                  }
                }
              }
            },
            {
              name: '财务报告',
              textStyle: {
                rich: {
                  title: {
                    color: 'inherit',
                    fontSize: 14,
                    width: 90,
                    fontWeight: 'bold'
                  },
                  value: {
                    fontSize: 14,
                    width: 100,
                    fontWeight: 'bold'
                  },
                  p: {
                    fontSize: 14,
                    width: 50,
                    color: '#50A4F2',
                    shadowColor: '#000',
                    inactiveColor: '#000',
                    fontWeight: 'bold'
                  }
                }
              }
            },
            {
              name: '资产负债',
              textStyle: {
                rich: {
                  title: {
                    color: 'inherit',
                    fontSize: 14,
                    width: 90,
                    fontWeight: 'bold'
                  },
                  value: {
                    fontSize: 14,
                    width: 100,
                    fontWeight: 'bold'
                  },
                  p: {
                    fontSize: 14,
                    width: 50,
                    color: '#8CA8E8',
                    shadowColor: '#000',
                    inactiveColor: '#000',
                    fontWeight: 'bold'
                  }
                }
              }
            },
            {
              name: '内部建设',
              textStyle: {
                rich: {
                  title: {
                    color: 'inherit',
                    fontSize: 14,
                    width: 90,
                    fontWeight: 'bold'
                  },
                  value: {
                    fontSize: 14,
                    width: 100,
                    fontWeight: 'bold'
                  },
                  p: {
                    fontSize: 14,
                    width: 50,
                    color: '#91cc75',
                    shadowColor: '#000',
                    inactiveColor: '#000',
                    fontWeight: 'bold'
                  }
                }
              }
            }
          ]
        },
        graphic: {
          elements: [
            {
              type: 'image',
              style: {
                width: 774,
                height: 684
              },
              left: '0',
              top: 'center'
            }
          ]
        },
        // "title": {
        //   "text": "{b|装机\n占比}",
        //   "x": "32.2%",
        //   "y": "center",
        //   "textStyle": {
        //     "lineHeight": 24,
        //     "rich": {
        //       "b": {
        //         "fontSize": 20,
        //         "fontWeight": "bold"
        //       }
        //     }
        //   }
        // },
        tooltip: {
          trigger: 'item',
          formatter: '{b}\n{c} {d}%'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['26%', '87%'],
            center: ['35%', '50%'],
            roseType: 'radius',
            startAngle: 30,
            avoidLabelOverlap: true,
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 103, 255, 0.2)',
              shadowOffsetX: -5,
              shadowOffsetY: 5,

              color: function (params) {
                // 颜色定制显示（按顺序）
                const colorList = [
                  ['#02D0C5', '#05B3AB'],
                  ['#2BC7F1', '#1BBBE7'],
                  ['#FED57F', '#F2B22F'],
                  ['#50A4F2', '#3A93E6'],
                  ['#8CA8E8', '#8CA8E8'],
                  ['#91cc75', '#91cc75']
                ]
                const colors = [
                  '#02D0C5',
                  '#2BC7F1',
                  '#E2B842',
                  '#50A4F2',
                  '#8CA8E8',
                  '#91cc75'
                ]
                return colors[params.dataIndex % 6]
              }
            },
            label: {
              lineHeight: 25,
              formatter: function (params) {
                return (
                  '{title|' +
                  params.name +
                  '}\n' +
                  '{value|' +
                  params.percent +
                  '%' +
                  '}'
                )
              },
              rich: {
                title: {
                  fontSize: 14,
                  fontWeight: 'bold',
                  color: '#000'
                },
                value: {
                  fontSize: 16,
                  fontWeight: 'bold'
                }
              },
              edgeDistance: 10
            },
            labelLine: {
              length: 20,
              length2: 20,
              maxSurfaceAngle: 80,
              lineStyle: {
                type: 'dashed'
              }
            },
            data: [
              {
                name: '基本信息',
                value: 10,
                label: {
                  color: '#02D0C5'
                }
              },
              {
                name: '党建工作',
                value: 7,
                label: {
                  color: '#2BC7F1'
                }
              },
              {
                name: '内设机构',
                value: 12,
                label: {
                  color: '#E2B842'
                }
              },
              {
                name: '财务报告',
                value: 8,
                label: {
                  color: '#50A4F2'
                }
              },
              {
                name: '资产负债',
                value: 6,
                label: {
                  color: '#8CA8E8'
                }
              },
              {
                name: '内部建设',
                value: 13,
                label: {
                  color: '#91cc75'
                }
              }
            ]
          },
          {
            itemStyle: {
              color: 'rgba(245,252,252, 0.6)'
            },
            type: 'pie',
            silent: true,
            center: ['35%', '50%'],
            radius: ['25%', '35%'],
            data: [
              {
                value: 100
              }
            ]
          }
        ]
      }
      myChart.setOption(option)
    },
    changeTab(index) {
      this.showTable = index
    }
  },
  data() {
    return {
      tabs: ['图形', '表格'],
      showTable: 0,
      resultData: [
        {
          name: '年检总数',
          number: '559'
        },
        {
          name: '年检合格',
          number: '489'
        },
        {
          name: '基本合格',
          number: '34'
        },
        {
          name: '不合格',
          number: '24'
        },
        {
          name: '未年检',
          number: '12'
        }
      ],
      tableData: [],
      deptTableData: [],
      depts: [
        '民政局',
        '市场监管局',
        '科学技术局',
        '人社局',
        '气象局',
        '法院',
        '残联',
        '科技协会',
        '消防救援队',
        '卫生健康委员会',
        '环保局',
        '城管局',
        '教育委员会',
        '妇联'
      ],
      list1: [
        '云阳县乒乓球协会',
        '重庆市云阳县佛教协会',
        '云阳县退休教师协会',
        '云阳县道路运输协会',
        '重庆市云阳县慈善会',
        '云阳县创业就业协会',
        '云阳县国学研究会',
        '重庆市云阳商贤企业商会',
        '云阳县体育舞蹈协会',
        '云阳县志愿服务联合会'
      ],
      list2: [
        '李杨林',
        '陈文平',
        '何万义',
        '王身明',
        '付青松',
        '杨雪梅',
        '刘学武',
        '彭锡明',
        '陶家华',
        '徐持凤'
      ]
    }
  },
  mounted() {
    this.setList()
    this.initBarChart('bar')
    this.initTopChart()
    this.initLinChart()
    this.initPieChart()
  }
}
</script>
<style>
.el-table__body td {
  cursor: pointer;
}

.centered-content {
  width: 100%;
  display: flex;
  /* 创建 Flexbox 布局 */
  justify-content: center;
  /* 水平居中对齐 */
  align-items: center;
  /* 垂直居中对齐 */
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f7faf7;
}

//图表自适应高度
.eee {
  height: calc(100vh - 390px);
  width: 100%;
}

.first_part {
  display: flex;
  justify-content: space-between;

  li {
    list-style: none;
    width: 19%;
    height: 120px;
    color: #fff;
    text-align: center;
    padding: 15px 30px;

    .number_name {
      height: 34px;
      line-height: 34px;
      font-weight: bold;
    }

    .split_line {
      width: 100%;
      height: 1px;
      background: rgba(255, 255, 255, 0.5);
    }

    .number_box {
      height: 50px;
      line-height: 50px;

      span {
        &:nth-child(1) {
          font-size: 30px;
          margin-right: 10px;
        }
      }
    }

    &:nth-child(1) {
      background: #5194f4;
      background: linear-gradient(0deg, #6168f1 0%, #4f99f4 70%, #4f99f4 100%);
      box-shadow: 0px 1px 5px #6168f1;
    }

    &:nth-child(2) {
      background: linear-gradient(0deg, #ed5b43 0%, #f99457 70%, #f99457 100%);
      box-shadow: 0px 1px 5px #ed5b43;
    }

    &:nth-child(3) {
      background: linear-gradient(0deg, #7d43e5 0%, #ad5eea 70%, #ad5eea 100%);
      box-shadow: 0px 1px 5px #7d43e5;
    }

    &:nth-child(4) {
      background: linear-gradient(0deg, #ea8c13 0%, #f8b93f 70%, #f8b93f 100%);
      box-shadow: 0px 1px 5px #ea8c13;
    }

    &:nth-child(5) {
      background: linear-gradient(0deg, #6168f1 0%, #4f99f4 70%, #4f99f4 100%);
      box-shadow: 0px 1px 5px rgba(97, 104, 241, 1);
    }

    &:nth-child(6) {
      background: linear-gradient(0deg, #10b572 0%, #29d7a0 70%, #29d7a0 100%);
      box-shadow: 0px 1px 5px rgba(16, 181, 114, 1);
    }
  }
}

.tab-btn {
  float: right;

  span {
    display: inline-block;
    padding: 2px 15px;
    border: 1px solid #7ca5e0;
    cursor: pointer;
    font-size: 14px;

    &.active {
      background: #5194f4;
      color: #fff;
    }
  }
}
</style>
